<!doctype html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--禁止缩放-->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <title>我的关注</title>
    <link href="../../static/css/font/font-awesome.css" rel="stylesheet" type="text/css"><!--字体图标-->
    <link href="../../static/css/public.css" rel="stylesheet" type="text/css"><!--默认共用样式-->
    <script src="../../static/js/jquery.1.9.1.min.js"></script>
    <link rel="stylesheet" href="../../static/swiper/swiper.min.css">
    <script src="../../static/swiper/swiper.min.js"></script>
    <link href="../../static/css/page_style.css" rel="stylesheet" type="text/css"><!--页面所需样式-->
    <link href="../../static/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../static/layui-v2.6.8/layui/layui.js"></script>
    <style type="text/css">

        /* 用户绑定拨动框架 */
        .my-pagination .swiper-pagination-bullet {
            text-align: center;
            border-radius: 0;
            opacity: 1;
        }

        .my-pagination ul {
            display: -webkit-box;
        }

        .my-pagination li {
            display: block;
            background: #fff;
            overflow: hidden;
            box-flex: 1;
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            height: 40px;
            line-height: 40px;
            position: relative;
            font-size: 13px;
        }

        .my-pagination li:after {
            position: absolute;
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
            z-index: 1;
            display: block;
            width: 100%;
            height: 1px;
            content: '';
            background-color: #dcdcdc;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            -webkit-transform: scaleY(.5)
        }

        .my-pagination .swiper-pagination-bullet-active {color: #21a4f4;}
        .my-pagination .swiper-pagination-bullet-active:after {opacity: 1;background-color: #21a4f4;height: 3px;}
        /* 用户绑定 */
        .user_zc_body {margin: 0px auto;overflow: hidden;background: #fff;}
        .user_zc_body ul {margin: 0 0;overflow: hidden;}
        .user_zc_body li {background: #fff;overflow: hidden;padding: 7px 0;position: relative;}
        .user_zc_body li:last-child {margin-bottom: 0;}
        .user_zc_body li:after {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            width: 100%;
            height: 1px;
            background: #dcdcdc;
            -webkit-transform: scaleY(.5);
        }
        .user_zc_body .p_input {padding-left: 40px;position: relative;}
        .user_zc_body .p_input input {
            width: 100%;
            padding: 0;
            margin: 0;
            height: 40px;
            color: #444;
            font-size: 15px;}
        .user_zc_body .p_input em {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #6ecb09;
            font-size: 16px;
        }
        .user_zc_body .p_wjmm {margin: 20px;text-align: right;
        }
        .user_zc_body .p_input_sm {padding-right: 50px;
        }
        .user_zc_body .p_input_sm .sp_btn {
            display: inline-block;
            position: absolute;
            right: 5px;
            top: 5px;
            z-index: 1;
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #f4f4f4;
            color: #666;
            border-radius: 4px;
            font-size: 12px;
        }
        .user_zc_body .p_input_sm .sp_btn i {font-size: 24px;margin-top: 4px;line-height: 32px;}
        .user_zc_body .p_input_yzm {padding-right: 90px;}
        .user_zc_body .p_input_yzm .sp_btn {
            display: inline-block;
            position: absolute;
            right: 5px;
            top: 5px;
            z-index: 1;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #288eff;
            color: #fff;
            border-radius: 4px;
            font-size: 12px;
        }
        .user_zc_body .p_input_yzm .sp_btn:active {background: #2686ef;}
        .user_zc_body .p_input_yzm .sp_btn_dx {right: 70px;}
        .user_zc_body .p_input_yzm .sp_btn.no_hit {color: #bbb;}
        .user_zc_btn .p_btn {overflow: hidden;}
        .user_zc_btn .p_btn a {
            display: block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            border-radius: 4px;
            font-size: 16px;}
        .user_zc_btn .p_btn a.c_1 {background: #f15145;}
        .user_zc_btn .p_btn a.c_1:active {background: #e44d41;}
        .user_zc_btn .p_btn a.c_2 {background: #00cfbe;}
        .user_zc_btn .p_btn a.c_2:active {background: #00c3b3;}
        .user_zc_btn .p_btn a.c_3 {background: #288eff;}
        .user_zc_btn .p_btn a.c_3:active {background: #2686ef;}
        .user_zc_btn .p_btn a.c_4 {background: #6ecb09;}
        .user_zc_btn .p_btn a.c_4:active {background: #66bc08;}
        #search_top{
            margin: 3px 0;
            position: relative;
            width: 88%;
            left : 50%;
            transform: translate(-50%);
            vertical-align:middle;
            background: #EEEEEE;
            padding-left: 23px;
            padding-top: 6px;
            padding-bottom: 5px;
            border-radius: 15px;
            font-size: 12px;
            height: 20px;
        }
        #search_icon{
            position: absolute;
            left: 5.5%;
            z-index: 500;
            font-size: 12px;
            top: 38%;
        }
        .list_{
            width: 100%;
        }
        #li_img{
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }
        #li_img_f{
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }
        .title_li{
            position: relative;
            height: 44px;
            padding-left: 6px !important;
            padding-right: 6px !important;
        }
        .list_span{
            position: relative;
            font-size: 12px;
            display: inline-block;
            transform: scale(0.95);
            left: -2px;
            overflow: hidden;
            color: #767474;
        }
        #title_h{
            margin-bottom: 5px;
            margin-top: 2px;
            font-size: 14px;
            overflow: hidden;
            font-weight: 500;
            display:inline-block;
        }
        #title_f{
            margin-bottom: 5px;
            margin-top: 2px;
            font-size: 13px;
            overflow: hidden;
            font-weight: 500;
            display:inline-block;
        }
        em{
            border-radius: 5px;
            color: #fefefe;
            padding: 0 4px;
            font-size: 12px;
            font-style: normal;
            position: absolute;
            margin-right: 0.3rem;
            background-color: #FCB779;
            border: none;
            top: 10px;
            transform: scale(0.80);
        }
        #icon_8{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 14px;
            right: 2px;
        }
        .layui-layer-dialog{
            border-radius: 5px;
        }
        .layui-layer-btn a{
            height: auto !important;
        }
    </style>


</head>
<body>
<div class="swiper-container" id="fans_main">
    <div class="my-pagination">
        <ul class="my-pagination-ul"></ul>
    </div>
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <!--我的关注-->
            <div class="user_zc_body">
                <ul>
                    <li>
                        <i id="search_icon" class="layui-icon layui-icon-search"></i><input type="text" id="search_top" v-model="names"  @keyup.enter="select" placeholder="按照用户名搜索">
                    </li>
                    <template v-if="indexs">
                        <li class="title_li" v-for="user in userList" :key="user.id">
                            <div class="list_">
                                <img style="float: left" id="li_img" :src="imageUrl+user.photo" alt="" onerror="this.src='../../static/images/morentouxiang.jpg'">
                                <div style="width: 80%;float: left;margin-left: 9px;overflow: hidden;white-space:nowrap;" @click="deep(user.id)">
                                    <h1 id="title_h" v-text="user.name"></h1>
                                    <em v-text="user.level"></em>
                                    <h1 id="tool"></h1><!--勿删-->
                                    <span class="list_span span_1" v-text="user.companyId"></span>
                                    <span class="list_span" v-text="user.officeId"></span>
                                </div>
                                <img id="icon_8" src="../../static/images/guanzhu(3).png" alt="" @click="cancel(user.id)">
                            </div>
                        </li>
                    </template>
                    <li class="title_li" v-show="userList.length===0" style="text-align: center">
                        <h1 style="font-size: 16px;margin-top: 10px">没有关注的用户哟..</h1>
                    </li>
                </ul>
            </div>
        </div>

        <div class="swiper-slide">
            <!--我的粉丝-->
            <div class="user_zc_body">
                <ul>
                    <li class="title_li" v-for="userFans in fansList" :key="userFans.id">
                        <div class="list_">
                            <img style="float: left" id="li_img_f" :src="imageUrl+userFans.photo" alt="" onerror="this.src='../../static/images/morentouxiang.jpg'" alt="">
                            <div style="width: 80%;float: left;margin-left: 6px;overflow: hidden;white-space:nowrap;">
                                <h1 id="title_f" v-text="userFans.name"></h1>
                                <em v-text="userFans.level"></em>
                                <h1></h1><!--勿删-->
                                <span class="list_span span_1" style="left: 0px" v-text="userFans.companyId"></span>
                                <span class="list_span" v-text="userFans.officeId"></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="../../static/js/vuemin.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="../../static/js/login_main.js"></script>
<script src="../../static/js/fans.js"></script>
<script src="../../static/js/coco-message.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.my-pagination-ul',
        paginationClickable: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        paginationBulletRender: function (index, className) {
            switch (index) {
                case 0:
                    name = '我的关注';
                    break;
                case 1:
                    name = '我的粉丝';
                    break;
                default:
                    name = '';
            }
            return '<li class="' + className + '">' + name + '</li>';
        }
    })
    var fans = new Vue({
        el: '#fans_main',
        data() {
            return {
                fanShow:'',
                key:0,
                indexs:'',
                names:'',
                actionType : '',
                state:1,
                imageUrl:"/bokeupload",
                users:{},
                userList: [],
                fansList:[]
            }
        },
        watch: {
            userList(newVal) {
                this.indexs = false
                if (true) {
                    this.$nextTick(()=>{
                        this.indexs = true;
                    })
                }
            }
        },
        async created() {
            await getUser();
            this.users = loginUser;
            await getFans();
            this.fansList=fansListUser;
            this.fanShow=fansListUser>0;
            await getAll();
            this.userList = allUser;
            this.indexs = allUser.length>0;
        },
        mounted() {

        },
        methods: {
            update() {

            },
           select(){
              axios({
                    method: "post",
                    url:"/bokehall/my/getList",
                    data:{"name":this.names}
                }).then(function (response) {
                    this.userList=response.data.data;
                    /*二次更新data时用这个刷新组件*/
                    fans.$set('userList',this.userList)
                    this.key++;
                    console.log(this.userList);
                }
                    )
            },
           cancel(id){
               layer.confirm('取消关注该用户?', {
                   btn: ['确定','关闭'], //按钮
                   title:''
               }, function(){
                   let from =new FormData();
                   from.append("id", id)
                   axios({
                       method: "post",
                       url:"/bokehall/my/cancelAttention",
                       data:from
                   }).then(async function (response) {
                       if(response.data==="ok"){
                           layer.msg('取消关注成功', {icon: 1});
                           await getAll();
                           this.userList= allUser;
                           fans.$set('userList',this.userList)
                       }else{
                           console.log("操作失败")
                       }
                   })
               }, function(){

               });
            },
            deep(id){
                window.location.href="/boke/user_findone.do?id="+id;
            }
        },

    })

</script>
</body>
</html>
